<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :autoBack="true">
			<view slot="center" class="navigate-title">人脸识别</view>
		</u-navbar>

		<view class="top-box">
			<view class="title-one">确认为 {{accreditName}} 本人操作</view>
			<view class="title-two">请保持正脸在取景框中根据屏幕提示完成识别</view>
			<image src="../../static/images/face.gif"></image>
		</view>

		<view class="card">
			<view>
				<image src="../../static/images/mobile.png" style="width: 80rpx;height: 80rpx;"></image>
				<view>正对手机</view>
			</view>
			<view>
				<image src="../../static/images/light.png" style="width: 72rpx;height: 72rpx;"></image>
				<view>光线充足</view>
			</view>
			<view>
				<image src="../../static/images/smile.png" style="width: 76rpx;height: 76rpx;"></image>
				<view>脸无遮挡</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="protocol-box">
				<view class="cicle" @click="isClick = !isClick">
					<view class="cicle-click" v-if="isClick"></view>
				</view>
				<span style="color: rgba(166, 166, 166, 1);">我已阅读并同意</span>
				<span style="color: rgba(65, 136, 239, 1);">《人脸验证协议》</span>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 34rpx;">
				<view class="btn" @click="toFace()">开始验证</view>
				<view class="btn-check" @click="preview()">查看合同</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		generatorContractApi
	} from "@/api/auth.js"
	export default {
		data() {
			return {
				companyInfo: '',
				accreditName: '',
				isClick: false
			}
		},
		mounted() {
			this.companyInfo = uni.getStorageSync('faceRecognitionInfo')
			this.accreditName = this.companyInfo.accreditName
			this.getPDF()
		},
		methods: {
			toFace() {
				if (this.isClick) {
					uni.navigateTo({
						url: '/subpackageTwo/pages/faceRec/faceRec'
					})
				} else {
					uni.$u.toast('请先阅读并同意协议')
				}
			},
			async getPDF() {
				uni.showLoading({
					title: '合同生成中',
					mask: true
				})
				const faceInfo = uni.getStorageSync('faceInfo')
				const faceRecognitionInfo = uni.getStorageSync('faceRecognitionInfo')
				const contractInfo = {
					...faceInfo,
					accreditName: faceRecognitionInfo.accreditName,
					accreditIdCard: faceRecognitionInfo.accreditIdCard,
					accreditPhone: faceRecognitionInfo.accreditPhone,
				}
				const token = uni.getStorageSync('token')
				const time = new Date().getTime()

				generatorContractApi(contractInfo).then(res => {
					console.log(res.data);
					uni.downloadFile({
						url: res.data,
						success: (res) => {
							if (res.statusCode === 200) {
								let tempFile = res.tempFilePath;
								uni.getFileSystemManager().saveFile({
									tempFilePath: tempFile,
									success(res) {
										uni.hideLoading()
										const contract = res.savedFilePath
										uni.setStorageSync('contract', contract)
									}
								})
							}
						},
						fail: (e) => {
							uni.showToast({
								title: '文件下载失败',
								icon: "error",
							})
						}
					});
				})
			},
			preview() {
				const url = uni.getStorageSync('contract')
				console.log(url);
				uni.openDocument({
					showMenu: true,
					filePath: url,
					fileType: 'pdf',
					success: function(res) {
						console.log('打开文档成功');
					},
					fail: (e) => {
						console.log(e);
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: calc(100% - 48rpx);
		margin-left: -30rpx;
		height: 100vh;
		background: #fff !important;
		padding: 0 54rpx;

		.top-box {
			text-align: center;

			image {
				width: 400rpx;
				height: 400rpx;
			}

			.title-one {
				margin-top: 66rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.title-two {
				font-size: 24rpx;
				color: rgba(128, 128, 128, 1);
				margin: 20rpx 0 70rpx 0;
			}
		}

		.card {
			width: 608rpx;
			height: 180rpx;
			border-radius: 8rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx -2rpx 4rpx rgba(0, 0, 0, 0.1), 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			margin: 88rpx auto 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-around;

			view {
				color: rgba(84, 84, 84, 1);
				font-size: 24rpx;
				letter-spacing: 2rpx;
				text-align: center;
			}
		}

		.bottom-box {
			width: calc(100% - 108rpx);
			position: fixed;
			bottom: 60rpx;

			.protocol-box {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				letter-spacing: 2rpx;

				.cicle {
					width: 22rpx;
					height: 22rpx;
					border-radius: 50%;
					border: 2rpx solid rgba(166, 166, 166, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 12rpx;

					.cicle-click {
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
						background: rgba(65, 136, 239, 1);
					}
				}
			}

			.btn {
				width: 440rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 10rpx;
				background: rgba(65, 136, 239, 1);
				font-size: 30rpx;
				font-weight: 700;
				letter-spacing: 8rpx;
				color: #fff;
				// margin: 34rpx auto 0 auto;
			}

			.btn-check {
				width: 180rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 10rpx;
				background: rgba(255, 255, 255, 1);
				border: 2rpx solid rgba(232, 235, 255, 1);
				font-size: 30rpx;
				font-weight: 700;
				letter-spacing: 8rpx;
				color: rgba(65, 136, 239, 1);
				// margin: 34rpx auto 0 auto;
			}
		}
	}
</style>